<template>
  <div class="mychannel">
    <van-cell :border="false">
      <div class="navTitle" slot="title" @click="sdn">频道编辑</div>
      <van-button round size="mini"  type="danger" @click="eintd=!eintd" plain>{{eintd ? '完成':'编辑'}}</van-button>
    </van-cell>
    <van-grid :gutter="10" >
      <van-grid-item :class="{actice : index === fistActivNmae }" v-for="( item , index) in channel" @click="channDetel(item,index)" :key="item.id" :icon="(eintd && index !== 0)?'close':''"  :text="item.name" />
    </van-grid>
    <van-cell>
      <div class="navTitle" slot="title">推荐频道</div>
     
    </van-cell>
    <van-grid :gutter="10" >
      <van-grid-item v-for="item in recomendChannels"   @click="onAll(item)" :key="item.id"  :text="item.name" />
    </van-grid>
  </div>
</template>
<script>
import {allChannleList,upChannle,deleteChannle} from '../../../api/user'
import {mapState} from "vuex"
import {setItem} from '../../../utils/localStorag'
export default {
    name:"chnnleEnid",
    props:{
        channel:{
            type:Array,
            required:true
        },
        fistActivNmae:{
          type:Number,
          required:true
        }
    },
    created(){
        this.sdn()
        console.log(this.fistActivNmae)
    },
    data(){
      return {
        allchnner:[],
        eintd:false
      }
    },
    methods:{
      // 删除频道的方法
        channDetel(channel,index){
          // console.log(index)
          if (this.eintd && index !== 0){
            if (index <= this.fistActivNmae){
              this.$emit('upActiveName',this.fistActivNmae-1)

            }
              // 删除
            this.channel.splice(index,1)
            if (this.user){
              // 删除的内容将提交到数据库中,使用接口
              deleteChannle(channel.id)
            }else{
              // 不使用接口,将删除的数据保存到本地存储中
              setItem('userChannle',this.channel)
            }
          }else {
            // 不删除，却换模式
            this.$emit('close')
            this.$emit('upActiveName',index)

          }
          
        },
        async onAll(de){
          //点击添加到channle中
          this.channel.push(de)
          // 需要实现数据持久化
          // console.log(this.user)
          console.log(this.user)
          if (this.user) {
            //如果登录了
            //我们使用接口,将添加的数据,返回到后端数据库
            var {data}= await upChannle({
                channels:[{
                  id:de.id,
                  seq:this.channel.length
                }]
                
            })
            console.log(data)
          }else {
            //如果没有登录
            //我们将添加的数据,保存到本地存储中
            setItem('userChannle',this.channel)



          }
          



        },
        async sdn(){
            
            var {data} = await allChannleList()
            
            this.allchnner = data.data.channels
            // console.log(this.allchnner)

        }
    },
    computed:{
      ...mapState(['user']),
      recomendChannels(){
        return this.allchnner.filter(channle=>{
          return !this.channel.find(userChann=>{
            return channle.id === userChann.id
          })
        })
      }
    }
   

};
</script>
<style scoped lang="less">
.mychannel {
  margin-top: 45px;
}
.navTitle {
    font-size: 16px;
    color: #333333;

}
.van-grid-item {
    height: 43px;
    width: 80px;
    
    /deep/.van-grid-item__content  {
        background: #f4f5f6;
        color: #222222;
        border-radius: 6px;

    }

}
/deep/.van-grid-item__icon {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;


}
/deep/.van-grid-item__text {
  margin-top: 0;
}
.actice {
  /deep/.van-grid-item__text {
    color: red;
  }
  
}
</style>